<template>
  <div class="dashboard-container">
    <div class="dashboard-text">学校个数: {{ schoolCount }}</div>
    <div class="dashboard-text">学院个数: {{ academyCount }}</div>
    <div class="dashboard-text">班级个数: {{ classsCount }}</div>
    <div class="dashboard-text">学生个数: {{ studentCount }}</div>
    <div class="dashboard-text">教师个数: {{ teacherCount }}</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      schoolCount: '',
      academyCount: '',
      classsCount: '',
      studentCount: '',
      teacherCount: ''
    }
  },
  mounted() {
    this.$http.post('/api/school/find', this.user).then(res => {
      console.log('res:', res)
      this.schoolCount = res.length
    }),
    this.$http.post('/api/academy/find', this.user).then(res => {
      console.log('res:', res)
      this.academyCount = res.length
    }),
    this.$http.post('/api/classs/find', this.user).then(res => {
      console.log('res:', res)
      this.classsCount = res.length
    }),
    this.$http.post('/api/student/find', this.user).then(res => {
      console.log('res:', res)
      this.studentCount = res.length
    }),
    this.$http.post('/api/teacher/find', this.user).then(res => {
      console.log('res:', res)
      this.teacherCount = res.length
    })
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
